<template>
  <n-modal
    :show="modelValue"
    preset="dialog"
    :show-icon="false"
    :style="style"
    :closable="closable"
    @close="closeModal"
  >
    <template #header>
      <slot name="header">{{ title }}</slot>
    </template>
    <slot name="content"></slot>
    <template #action>
      <slot name="action"></slot>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
interface Props {
  modelValue?: boolean
  title?: string
  style?: string | object
  closable?: boolean
}

withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: '',
  style: '',
  closable: true
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

const closeModal = () => {
  emit('update:modelValue', false)
}
</script>
